<template>
  <div class="tw">
    <!-- //表 -->
    <div class="biao">
      <input type="text" v-model="name" @keydown.enter="ca">
      <el-button type="success" @click="Open">新增</el-button>

      <el-table :data="tableData" style="width: 100%"    
       v-loading="loadings" :element-loading-spinner="svg"  
       element-loading-background="rgba(122, 122, 122, 0.8)">
        <el-table-column fixed prop="name" label="姓名" width="150" />
        <el-table-column prop="city" label="城市" width="120" />
        <el-table-column prop="describe" label="描述" width="120" />
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scoped">
            <el-popconfirm
              confirm-button-text="Yes"
              cancel-button-text="No"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="Are you sure to delete this?"
              @confirm="confirmEvent(scoped.row)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button>Delete</el-button>
              </template>
            </el-popconfirm>
            <!-- <el-button link type="primary" size="small" @click="handleClick"scoped
          >Detail</el-button
        > -->
            <el-button link type="primary" size="small" @click="edits(scoped.row)">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //弹 -->
    <div class="tan">
      <el-dialog v-model="dialogFormVisible" :title="`${form.id ? '编辑' : '新增'}`" width="500">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="城市" :label-width="formLabelWidth">
            <el-input v-model="form.city" autocomplete="off" />
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="form.describe" autocomplete="off" />
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="qx">取消</el-button>
            <el-button type="primary" @click="qie"> Confirm </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from '@/utils/Reuqest'
import { ref, reactive, toRefs } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const loadings=ref(false)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const name=ref()
const ca=()=>{
   if(name.value){
    tableData.value=tableData.value.filter((value, index) => {
      return value.name.includes(name.value)
    })
   }else{
    Rendering()
   }
}
//忘记 引入 插件    导致50 0
const Rendering = async () => {
  loadings.value=true
  const res = await axios.get('/api/ren')
  console.log(res, 'iiiii')
  pageForm.tableData=res.data.data
  loadings.value=false
}
Rendering()
const pageForm = reactive({
  form: {
    id: null,
    name: '',
    city: '',
    describe: '',
    age: ''
  },
  tableData: reactive([])
})
const { form, tableData } = toRefs(pageForm)
const RetestForm = () => {
  const yellowForm = reactive({
    id: null,
    name: '',
    city: '',
    describe: '',
    age: ''
  })
  pageForm.form = yellowForm
}
// const form = reactive({
//   id:null,
//   name: '',
//   city: '',
//   describe: '',
//   age: '',

// })
const Open = () => {
  dialogFormVisible.value = true
}
const edits = (data: any) => {
  dialogFormVisible.value = true
  pageForm.form = JSON.parse(JSON.stringify(data))
}
const qie = async () => {
  if (form.value.id) {
    let res = await axios.post('/api/edit', { editObj: form.value })
    if (res.data.code === 0) {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'success'
      })
      Rendering()
      dialogFormVisible.value = false
      RetestForm()
    }
  } else {
    let res = await axios.post('/api/add', { AddObj: form.value })
    if (res.data.code === 0) {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'success'
      })
      Rendering()
      dialogFormVisible.value = false
      RetestForm()
    }
  }
}
const confirmEvent = async (delObj: Object) => {
  console.log('confirm!')
  let res = await axios.post('/api/del', { delObj })
  if (res.data.code === 0) {
    ElMessage({
      showClose: true,
      message: res.data.message,
      type: 'success'
    })
    Rendering()
    RetestForm()
  }
}
const cancelEvent = () => {
  console.log('cancel!')
}
const qx = () => {
  RetestForm()
  dialogFormVisible.value = false
}
</script>

<style lang="scss" scoped></style>
